<template>
  <div id="app">
    <div class="list"><span @click="goto('/',0)" :class="{activeShow:active==0}">滨海</span>|<span @click="goto('/chashan',1)" :class="{activeShow:active==1}">茶山</span>|<span @click="goto('/leqing',2)" :class="{activeShow:active==2}">乐清</span>|<span @click="goto('/manager',3)" :class="{activeShow:active==3}"> 学生管理系统</span></div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
return {
    active:0
  };
},
methods:{
  goto(url,index){
    this.$router.push(url)
    this.active=index
  }
}
}
</script>

<style>
span{
  margin-left: 20px;
  margin-right: 20px;
  text-decoration: underline;
}
.activeShow{
  color: greenyellow;
}
</style>
